<template>
    <div class="accountBottom">
        <div class="bottom-play" @click="selectAllMusic">
            <span></span>
            <span>播放全部</span>
        </div>
    <div class="bottom-wrapper">
        <ScrollView>
          <SongListItem :songs="switchNum === 0 ? favoriteList : historyList"></SongListItem>
        </ScrollView>
      </div>
    </div>
</template>

<script>
import ScrollView from '../ScrollView.vue';
import SongListItem from '../SongListItem.vue'
import { mapGetters,mapActions} from 'vuex'
import { mapMutations } from 'vuex';
export default {
    name:"AccountBottom",
    components:{
        ScrollView,
        SongListItem
    },
    computed:{
        ...mapGetters(['favoriteList','historyList'])
    },
    props:{
        switchNum:{
            default:0,
            type:Number,
            require:true
        }
    },
    methods:{
        ...mapActions(['setFullScreen','setCurrentIndex']),
        ...mapMutations(['SET_SONG_DETAIL']),
        //点击所有播放全部
        selectAllMusic () {
            if(this.switchNum === 0) {//我喜欢的
                //获取所有可播放歌曲id以获取所有歌曲详情
               this.SET_SONG_DETAIL(this.favoriteList);
            }else{ //最新听的
                //获取所有可播放歌曲id以获取所有歌曲详情
                this.SET_SONG_DETAIL(this.historyList);
            };
            this.setCurrentIndex(0)
            this.setFullScreen(true)
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin.scss";
@import "../../assets/css/variable.scss";
.accountBottom{
    position: fixed;
    top: 100px;
    left: 0;
    bottom: 0;
    right:0;
    .bottom-play{
        width: 260px;
        height: 60px;
        margin: 20px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #fff;
        @include border_color();
        border-radius: 30px;
        span{
            display: inline-block;
            &:nth-of-type(1){
                width: 46px;
                height: 46px;
                @include bg_img('../../assets/images/small_play');
                margin-right:20px;
            }
        }
    }
    .bottom-wrapper{
        position: fixed;
        top: 200px;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
    }
}

</style>